import React from 'react';
import { Row, Col, Form, Input, Button, Spin, DatePicker, Table, Select, Popconfirm, Card, message, Upload, Icon } from 'antd';
import moment from 'moment';
import { getJsonReactNode } from '../../utils';
import { DEFAULT_PAGE_SIZE } from '../../utils/constants';
import styles from '../common_left.css';
import QuaReportModal from './QuaReportModal';


const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

@Form.create()
class QuaReportTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = { // 状态树，存储各个控件的状态值，供外部调用
      currentRecord: {}, // 定义当前行变量，通过判断变量是否有值来决定走新增 or 修改
      panelVisible: false, // 定义是否显示新增/编辑弹窗页面
      selectedRowKeys: [],
      filter: '',
      searchButtonVisible: true, //控制编辑页面部分组件是否可用
    };
  }
   // 监听快捷键事件
   componentDidMount(){
    document.addEventListener('keyup',this.onKeyDown);
  }
  componentWillUnmount(){
    document.removeEventListener('keyup',this.onKeyDown);
  }
  // 添加事件

  onKeyDown=(e) => {
    if(e.keyCode===13){
      this.handleSearch()
    }
  }
  handleSearch = () => { // 查询方法
    const {  // 该组件的属性，由外部传入参数
      dispatch,
      form: { validateFields, getFieldsValue },
    } = this.props;
    validateFields((errors) => {
      if (errors) {
        return;
      }
      const data = {
        ...getFieldsValue(),
      };
      dispatch({ // 调用接口，请求数据
        type: 'qualityreport/fetchQualityRep', //  models的namespace + effects的方法名，也可以是reducers的方法
        payload: {
          params: data,
        },
      });
    });
  };
    // 添加事件

    onKeyDown=(e) => {
      if(e.keyCode===13){
        this.handleSearch()
      }
    }
  handleAddQuaReport = () => {
    this.setState({ // 设置状态树
      currentRecord: {},  // 设置状态树中当前行对象为空，这样可通过判断对象是否为空，来决定走编辑or新增
      panelVisible: true, // 设置新增/编辑表单可见
      searchButtonVisible: false, // 编辑页面可用
    });
  };
  handleUpdate = (record) => {
    this.setState({ // 设置状态树
      currentRecord: record,  // 设置状态树中当前行对象为空，这样可通过判断对象是否为空，来决定走编辑or新增
      panelVisible: true, // 设置新增/编辑表单可见
      searchButtonVisible : true,
    });
  };

  // 将获取到的接口数据进行渲染
  render() {
    const { dispatch, loading, ReportInfo, ReporterList, ProjectList,RelatedAnalysisData, form: { getFieldDecorator } } = this.props;
    const status = ['已发送', '未发送'];
    // 定义表头字段及取值内容
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '项目名称',
        dataIndex: 'project_name',
        key: 'project_name',
      },
      {
        title: '版本号',
        dataIndex: 'fix_version',
        key: 'fix_version',
      },
      {
        title: '是否发送',
        dataIndex: 'is_send',
        key: 'is_send',
      },
      {
        title: '报告人',
        dataIndex: 'reporter',
        key: 'reporter',
      },
      {
        title: '操作',
        render: (text, record) => {
          return (
            <div className={styles.operation}>
              <a
                onClick={() => this.handleUpdate(record)}
              >
                修改
              </a>
            </div>
          );
        },
      },
    ];
    const modalProps = {
      dispatch,
      loading,
      ReporterList,
      ReportInfo,
      ProjectList,
      RelatedAnalysisData,
      visible: this.state.panelVisible,
      currentUser: this.state.currentRecord,
      ButtonVisible: this.state.searchButtonVisible,
      onCancel: () => {
        this.setState({
          currentRecord: {},
          panelVisible: false,
          searchButtonVisible : false,
        });
      },
    };
    return (
      <div>
        { this.state.panelVisible ?
          (
            <QuaReportModal {...modalProps} />
          ) :
          (<div>
            <Card style={{ marginBottom: 16 }}>
              <Row gutter={12} style={{ marginBottom: 8 }}>
                <Form>
                  <Col span={6}>
                    <FormItem
                      label="project_name"
                      {...formItemLayout}
                    >
                      {getFieldDecorator('project_name', {
                        initialValue: '',
                      })(
                        <Select
                          showSearch
                          optionFilterProp="children"
                          filterOption={(input, option) =>
                            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                        >
                          <Option key={-1} value="">请选择项目名称</Option>
                          {// 这括号表示括起来的是一个表达式 不同于函数的括号，这里面只能放一个表达式
                            ProjectList.map((item, index) => {
                              return (<Option key={index} value={item}>{item}</Option>);
                            })
                          }
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                  <Col span={6}>
                    <FormItem
                      label="fix_version"
                      {...formItemLayout}
                    >
                      {getFieldDecorator('fix_version', {
                        initialValue: '',
                      })(
                        < Input />
                      )}
                    </FormItem>
                  </Col>
                  <Col span={6}>
                    <FormItem
                      label="报告人"
                      {...formItemLayout}
                    >
                      {getFieldDecorator('reporter', {
                        initialValue: '',
                      })(
                        < Input />
                      )}
                    </FormItem>
                  </Col>
                  <Col span={8}>
                        <div className={styles.btnGroup}>
                          <Button
                            style={{ margin: 8 }}
                            type="primary"
                            loading={loading}
                            onClick={this.handleSearch}
                          >
                            查询
                          </Button>
                          <Button type="primary" onClick={this.handleAddQuaReport}>新增</Button>
                        </div>
                  </Col>
                </Form>
              </Row>
            </Card>
            <Table
              columns={columns}
              dataSource={ReportInfo}
              loading={loading}
              rowKey={record => record.id}
              pagination={{
                pageSize: DEFAULT_PAGE_SIZE,
              }}
              bordered
            />
          </div>)
        }
      </div>
    );
  }
}

export default QuaReportTable;
